 <template>
  <div>
    <!-- 轮播图区域 -->
   <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>
    <!-- 九宫格改造为六宫格区域 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newslist">
          <img src="../../images/menu1(1).png" alt />
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photolist">
          <img src="../../images/menu2.png" alt />
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goodslist">
          <img src="../../images/menu3.png" alt />
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu4.png" alt />
          <div class="mui-media-body">留言反馈</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu5.png" alt />
          <div class="mui-media-body">视频专区</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu6.png" alt />
          <div class="mui-media-body">联系我们</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
//按需导入提示组件
import { Toast } from "mint-ui";
//导入轮播图组件
import swiper from "../subcomponents/swiper.vue";
export default {
  data() {
    return {
      lunbotuList: [] //保存轮播图的数组
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      this.$https
        .get("http://www.liulongbin.top:3005/api/getlunbo")
        .then(res => {
          //console.log(res.data);
          if (res.data.status === 0) {
            //成功了
            this.lunbotuList = res.data.message;
          } else {
            Toast("加载轮播图失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  components:{swiper}
};
</script>

<style lang="scss" scoped>
.mui-grid-view.mui-grid-9 {
  background-color: white;
  border: none;
}
// 规则 .ul.item 匹配 class 属性同时含有 ul 和 item 的元素,加强匹配规则；
// 规则 .ul .item 匹配 class 属性包含 ul 的元素中 *任意的* class 属性包含 item 的元素（二者是祖先元素与后代元素的关系）；
// 规则 .ul > .item 匹配 class 属性包含 ul 的元素的子元素中 class 属性包含 item 的元素（二者是父元素与子元素的关系，在相邻的层
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: 0;
}
//一般情况下只要定义好宽度，那高度就会自动适应了，不需要再设置也行。
// 但是写好高，不设置宽那就不会自动适应
.mui-grid-view.mui-grid-9 img {
  width: 60px;
  height: auto;
}

.mui-media-body {
  font-size: 13px;
}
</style>

